<template>
  <div class="article-comments">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <comment-item 
        v-for="(item, index) in list" 
        :key="index" 
        :comment="item"
        @clickReply="$emit('clickReply2', $event)"
      />
    </van-list>
  </div>
</template>

<script>
import {getComments} from '@/api/comment'
import CommentItem from './comment-item'

export default {
  name: "ArticleComment",
  props: {
    articleId: {
      required: true
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      offset: null, 
      totalCount: 0 
    }
  },
  components: {
    CommentItem
  },
  created() {
    this.onLoad()
  },
  methods: {
    async onLoad() {
      const { data } = await getComments({
        type: 'a',
        source: this.articleId.toString(),
        offset: this.offset,
        limit: 10
      })

      const { results } = data.data
      this.list.push(...results)

      this.totalCount = data.data.total_count
      this.$emit('getTotal', this.totalCount)

      this.loading = false

      if (results.length) {
        this.offset = data.data.last_id
      } else {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
</style>
